<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>话题-乐热评</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" type="text/css" href=".././alicon/iconfont.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/comment.css">
    <script src="../js/aes.js"></script>

</head>
<body class="mbg">

<!-- 你的HTML代码 -->
<div class="layui-header header header-doc ">
    <div class="layui-main pbg">
        <a class="logo" href=".././index.html"><img src="../img/logo.png"/>
        </a>
        <ul class="layui-nav layui-layout-left" lay-filter="">
            <li class="layui-nav-item layui-this"><a href=".././index.html">首页</a></li>
            <li class="layui-nav-item"><a href=".././search.html">搜索</a></li>

            <li class="layui-nav-item"><a href=".././event.html">动态</a></li>
            <li class="layui-nav-item layui-layout-right">
            </li>
        </ul>
    </div>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</div>


<div class="layui-main pbg">


    <div class="layui-row">
        <div class="child-head">
            <h1>
                <i class="icon iconfont icon-erji" style="color: salmon"></i>

                热评
            </h1>
        </div>
        <hr/>
        <span class="layui-breadcrumb card-side">
          <a href="../index.html">首页</a>
          <a href="../buzz.html">热评</a>
          <a><cite>评论</cite></a>
        </span>
        <hr/>
    </div>

    <div class="layui-row">
        <div class="layui-col-md9 clearfix">
            <div id="content" class="comment">&nbsp;</div>
        </div>

        <div class="layui-col-md3">
            <div class="layui-row ">
                <div class="layui-row ws18 up25">活动</div>
                <hr>
                <ul>
                    <div class="announcement">
                        <li><a>活动1..............</a></li>
                        <li><a>活动2..............</a></li>
                        <li><a>活动3..............</a></li>
                    </div>
                </ul>
                <hr>
            </div>
            <div class="layui-row">
                <div class="ws18">附近</div>
                <hr>
                <ul class="nearby"></ul>
                <hr>
            </div>
        </div>


    </div>
</div>
<div class="footer">
    &copy;Copyright 2018 乐热评<br>
    感谢：<a>Layui</a>,<a>Bootstrap</a>,<a>网易云</a>,<a>QQ音乐</a>,<a>酷我音乐</a>...<br>
    联系我们：<a href="mailto:amoxuk@aliyun.com">amoxuk#aliyun.com(#换成@)</a>
</div>


</div>
<script src="../layui/layui.js"></script>


<script type="text/javascript" src="../js/jquery-1.12.0.min.js"></script>
<script src="../js/jquery.session.js"></script>
<script type="text/javascript" src="../js/jquery.flexText.js"></script>
<script src="../js/reply.js"></script>
<script src="../js/top.js"></script>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;


        /*回复*/
        (function () {
            $('#content.comment').on('click', '.hf-pl', function () {
                var oThis = $(this);
                //获取输入内容
                console.log("this is in self page");
                var content = oThis.siblings('.flex-text-wrap').find('.comment-input').val();
                console.log(content);
                if (content.replace(/^ +| +$/g, '') === '' || content.trim().length < 1) {
                    /*输入内容为空*/
                    layer.msg("输入内容为空。");
                    return false;
                } else {
                    var loadIdx = layer.load(1);
                    var rcid = oThis.attr("data-id");
                    if (!oThis.parents('.comment-show').length) {
                        rcid = 0;
                        /*如果是根列表回复，回复ID设置为0*/
                    }
                    var bcid = oThis.parents('.commentAll').siblings('.inline').find('.comment').attr("data-id");
                    if (!bcid) {
                        bcid = rcid;
                    }

                    $.ajax({
                        url: '/buzz/' + bcid + "/" + rcid
                        , type: 'post'
                        , data: {"data": aes.encrypt(content)}
                        , success: function (res) {
                            layer.close(loadIdx);
                            if (res.status === 0) {
                                layer.msg("发表成功");
                                var oHtml = buildReply(res.data);
                                addReply(oHtml, oThis);
                                return false;
                            } else {
                                layer.alert(res.msg);
                            }
                            return false;
                        },
                        error: function (res) {
                            layer.close(loadIdx);
                            layer.alert("错误码：" + res.status + "<br>" + res.statusText);
                            return false;
                        }
                    });


                }
            });
        })();
        <!--分享-->
        (function () {
            $('#content.comment').on('click', '.share', function () {
                var dom = $(this);
                var did = dom.attr('data-id');
                var text = "给你分享一个来自乐热评的消息：" +
                    dom.parents('.card_detail').find('.card_text').text() +
                    "\n点击查看原文：http://localhost/buzz/comment.html?id=" + did;
                layer.prompt({
                    formType: 2,
                    value: text,
                    title: '复制内容分享',
                }, function (value, index, elem) {
                    layer.close(index);
                });
            });
        })();
        <!--点赞-->
        (function () {
            $('#content').on('click', '.like,a.date-dz-z', function () {
                var thumbNum = $(this).find('num').html();
                console.log("当前点赞数:" + thumbNum);
                var dom = this;
                if ($.cookie('user') == null) {
                    layer.msg("点赞需要登录。");
                    return false;
                } else {
                    var cid = $(this).attr('data-id');
                    var links;
                    if ($(this).attr('class').find('like')) {
                        links = '/like/share/' + cid
                    } else
                        links = '/like/shareComment/' + cid
                    $.ajax({

                        url: links
                        , type: 'post'
                        , success: function (res) {
                            layer.msg(res.msg);
                            if (res.status === 0) {
                                /*操作成功*/
                                if (res.count === 1) {
                                    /*点赞*/
                                    thumbNum++;
                                    if ($(dom).find('.iconfont').length) {
                                        $(dom).find('.iconfont').addClass('icon-dianzan1').removeClass('icon-dianzan');
                                    } else {
                                        $(dom).addClass('date-dz-z-click');
                                        $(dom).find('.date-dz-z-click-red').addClass('red');
                                    }
                                    $(dom).find('num').html(thumbNum);

                                } else {
                                    /*取消点赞*/
                                    thumbNum--;
                                    if ($(dom).find('.iconfont').length) {
                                        /*主页面*/
                                        $(dom).find('.iconfont').addClass('icon-dianzan').removeClass('icon-dianzan1');
                                    } else {
                                        $(dom).removeClass('date-dz-z-click red');
                                        $(dom).find('.date-dz-z-click-red').removeClass('red');
                                    }
                                    $(dom).find('num').html(thumbNum);

                                }
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                        , error: function (res) {
                            layer.msg("错误码：" + res.status + "<br>" + res.statusText);
                        }
                    });
                    return false;
                }
            });
        })();


        $.get('/buzz/comment/' + getHashData('id') + '?limit=10&offset=' + 0, function (res) {
            //假设你的列表返回在data集合中
            var lis = [];

            layui.each(res.data, function (index, result) {
                var tmp = '<li class="card clearfix">' +
                    '<div class="card_detail" style="margin-left: 17px">' +
                    '<div class="card_nick">' +
                    '<a href="http://music.163.com/#/user/home?id=' + result.userId + '" target="_blank" class="ws16 W_fb S_txt1">' + result.userName + '</a>' +
                    '</div>' +
                    '<div class="card_time">' + result.ctime + '</div>' +
                    '<div class="card_text ws14">' + result.content + '</div>';
                if (result.bereplied) {
                    tmp += '<div class="card_text ws14"> <strong>回复消息</strong>：' + result.bereplied + '</div>';
                }
                tmp += '<div class="float_right">——来自 <a target="_blank" href="http://music.163.com/#/artist?id='
                    + result.music.sid + '">' + result.music.singer.name +
                    '</a> 《<a target="_blank"  href="' + result.music.link + '">' +
                    result.music.name + '</a>》 <a>' + result.music.source.name + '</a></div>' +
                    '<div class="layui-row">' +
                    '<ul class="inline">' +
                    '<li class="like" data-id="' + result.id + '">' +
                    '<a href="javascript:;" >';

                if (result.userLike) {
                    tmp += '<i class="iconfont icon-dianzan1"></i>';
                } else {
                    tmp += '<i class="iconfont icon-dianzan"></i>';
                }
                tmp += '<num>' + result.likedNum + '</num>' +
                    '</a>' +
                    '</li>' +
                    '<li class="comment" data-id="' + result.id + '">' +
                    '<a href="javascript:;" ><i class="layui-icon">&#xe63a;</i>' +
                    '</a>' +
                    '</li>' +
                    '<li class="share" data-id="' + result.id + '">' +
                    '<a href="javascript:;" ><i class="layui-icon">&#xe641;</i></a>' +
                    '</li>' +
                    '<li class="report" data-id="' + result.id + '">' +
                    '<a href="javascript:;" ><i class="layui-icon">&#xe6c5;</i></a>' +
                    '</li>' +
                    '</ul>' +
                    '<div class="commentAll">' +
                    '<div class="reviewArea clearfix"></div>' +
                    '<div class="comment-show">';
                if (result.comment.length > 0) {
                    var child = buildReply(result.comment);
                    tmp += '<ul class="hf-list-con" style="display: block;">' + child + '</ul>';
                } else {
                    tmp += '<ul class="hf-list-con"></ul>';
                }
                tmp +=
                    '</div>' +
                    '</div>' +
                    '<div class="comment-pl-block clearfix">' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</li>';
                lis.push(tmp);

            });

            $('#content').append(lis);


            layui.use('flow', function () {
                var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                var flow = layui.flow;
                flow.load({
                    elem: '.hf-list-con' //指定列表容器
                    , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                        var lis = [];
                        if (page === 1) {
                            lis.push('<li class="all-pl-con new-tab">\n' +
                                '以下是最新评论:\n' +
                                '</li>');

                        }

                        //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                        $.get('/buzz/comment/reply/' + getHashData('id') + '?limit=10&offset=' + (page - 1) * 10, function (res) {
                            //假设你的列表返回在data集合中

                            if (res.data.length > 0) {
                                lis.push(buildReply(res.data));
                            }

                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < res.count / 10);
                        });
                    }
                });
            });

        });


    });
</script>
<script type="text/javascript" src="../js/nearby.js"></script>
</body>
</html>